<template>
	<a-card :bordered="false" class="mt-2">
		<s-table
			ref="tableRef"
			:columns="columns"
			:data="loadData"
			bordered
			:row-key="(record) => record.id"
			:tool-config="{refresh: true, height: true, columnSetting: false, striped: false}"
		>
			<template #operator>
				<a-button type="primary" @click="formRef.onOpen()">
					<template #icon>
						<import-outlined/>
					</template>
					新增
				</a-button>
			</template>
			<template #bodyCell="{ column, record, text }">
				<template v-if="column.dataIndex === 'action'">
					<a-button type="link" size="small" @click="formRef.onOpen(record)">编辑</a-button>
					<a-popconfirm title="确定要删除吗？" @confirm="del(record.id)">
						<a-button type="link" danger size="small">删除</a-button>
					</a-popconfirm>
				</template>
			</template>
		</s-table>
	</a-card>
	<Upload ref="formRef" @successful="tableRef.refresh(true)"/>
</template>

<script setup name="websiteRecord">
import supplierApi from "@/api/tjzy/supplier/supplierApi";
import Upload from "@/views/tjzy/supplier/form.vue";

const searchFormState = ref({
	current: 1,
	size: 10
})
const tableRef = ref()
const formRef = ref()
const columns = [
	{
		title: '供应商名称',
		dataIndex: 'supplierName'
	},
	{
		title: '供应商编码',
		dataIndex: 'supplierCode'
	},
	{
		title: '供应商联系人',
		dataIndex: 'supplierContact'
	},
	{
		title: '计费方式',
		dataIndex: 'billingMethod'
	},
	{
		title: '创建时间',
		dataIndex: 'createTime'
	},
	{
		title: '操作',
		dataIndex: 'action',
		align: 'center'
	}
]
const loadData = (parameter) => {
	searchFormState.value.current = parameter.current
	searchFormState.value.size = parameter.size
	return supplierApi.pageList(searchFormState.value).then((res) => {
		return res
	})
}
const del = (id) => {
	supplierApi.del(id).then(res => {
		tableRef.value.refresh(true)
	})
}
</script>
